<template>
  <div :class="['dw-input-box', { 'dw-input-group': $scopedSlots.$hasNormal }]">
    <div class="slot-group prepend-slot" v-if="$scopedSlots.prepend">
      <slot name="prepend"></slot>
    </div>
    <input :class="['dw-input', { disabled: disabled, clearable: clearable, 'slot-input': $scopedSlots.$hasNormal, 'prepend-input': $scopedSlots.prepend, 'append-input': $scopedSlots.append }]" :disabled="disabled" type="text" :value="value" :placeholder="placeholder" @input="$emit('input', $event.target.value)" />
    <span v-if="clearable" class="btn" @click="$emit('input', '')"></span>
    <div class="slot-group append-slot" v-if="$scopedSlots.append">
      <slot name="append"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "dwInput",
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {},
    placeholder: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // console.log("$scopedSlots", this.$scopedSlots);
  },
};
</script>

<style lang="less" scoped>
@import "./assets/index.less";
.dw-input-box {
  position: relative;
  /* box-sizing: border-box; */
}
.dw-input-group {
  display: inline-table;
  border-collapse: separate;
  width: 100%;
  border-spacing: 0;
}

.disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
.clearable {
  padding-right: 30px;
}
.dw-input-box:hover .btn {
  width: 0.9em;
  height: 0.9em;
  background: url("./assets/close.png");
  background-size: 100%;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-0.45em);
  cursor: pointer;
}
.dw-input-box .btn:hover {
  background: url("./assets/close-hover.png");
  background-size: 100%;
}
</style>
